<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #div1{
	   width:200px;
	   height:200px;
	   background-color:red;
	 }
  </style>
 </head>
 <body>
   <div id="div1"></div>
   <button onclick="show()">改变div样式</button>
 </body>
  <script>
  var i = 1;
  function show(){
  var div = document.getElementById("div1");
  if(i % 2 ==1){
  div.style.height = "400px";
  div.style.width ="400px";
  div.style.backgroundColor = "green";
  div.style.setProperty("transition","all 1s linear");
  }else{
  div.style.height = "200px";
  div.style.width = "200px";
  div.style.backgroundColor = "red";
  div.style.setProperty("transition","all 1s linear");
  i = 0;
  }

 i ++;
  }
    
  </script>
</html>
